z<template>
  <!-- 登录页面 -->
  <el-main>
    <div style="text-align: center;font-size:24px;color:rgb(96,98,102) ;margin-top: 200px;">汤臣一品便民服务中心 - 用户登录</div>
    <el-row style="margin-top: 60px;margin-bottom: 260px;">
      <el-col :span="10" :offset="6">
        <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password" autocomplete="off" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="login('user')">用户登录</el-button>
            <el-button @click="login('admin')">进入后台</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </el-main>
</template>

<script>
  export default{
    data() {
      return {
        user: {
          username: "admin",
          password: "111111",
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      login: function(view){
        //使用element ui自带的验证规则，如果未通过，返回不执行
        let flag = true;
        this.$refs['user'].validate((valid) => {
          if (!valid) {
            flag = false;
          }
        });
        if(!flag){
          return;
        }

        // this.$axios.post("http://localhost:8080/acct/login", this.user).then(res => {修改
        this.$axios.post("http://localhost:8800/admin/system/index/login", this.user).then(res => {
          // if(res.data.status == 'SUCCESS'){修改
            //if(res.data.code == '200'){//登陆成功
            //将传回的user对象以字符串方式存到本地
            sessionStorage.setItem('user',JSON.stringify(this.user));
            //将token存到本地
            sessionStorage.setItem('token',JSON.stringify(res.data.data.token));
            sessionStorage.setItem('id',res.data.data.id)
            console.log(res)
            // window.sessionStorage.setItem("token",res.data.token)
            // console.log(res.data.token)
            //放便商户调取
            // sessionStorage.setItem('uid',res.data.data.id)

            // 循环出该登录用户所有的角色信息
            // let roles = []
            // for(const role of res.data.data.roles){
            //   roles.push(role.name)
            // }

            //测试
            // if(this.user.username == 'admin' && this.user.password == 'admin'){
            //   this.$router.push('/')
            //   this.$message.success("登录成功")
            //   return
            // }

            //如果访问的是用户页面 且 有USER角色，登录成功跳转到首页
            if(view == 'user'){
              this.$router.push('/')
              this.$message.success("登录成功")
              return
            }
            //如果访问的是管理页面 且 不是USER角色，登录成功跳转到管理页面
            // if(view == 'admin' && ( roles.includes('ROLE_ADMIN') || roles.includes('ROLE_PROPERTY') || roles.includes('ROLE_MERCHANT') ) ){
            //   this.$router.push('/admin')
            //   this.$message.success("登录成功")
            //   return
            // }

            //如果访问的页面 不匹配 应有的权限，提示没有访问权限
            // this.$message.error("抱歉，您没有访问此页面的权限")
          // }else{
          //   this.$message.error(res.data.message)
          //   return
          // }
        })
      },
    },
    mounted() {
      /* 设置页面标题 */
      document.title="登录 - 汤臣一品便民服务中心"
    }
  }
</script>

<style scoped>

</style>